<template>
    <div class="manage">
        <el-dialog :title="operateType === 'add' ? '新增用户' : '更新用户'" :visible.sync="isShow">
            <CommonFormVue :formLabel="opertateFormLabel" :form="operateForm" :inline="true" ref="form">
            </CommonFormVue>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm" type="primary">确定</el-button>
            </div>
        </el-dialog>
        <div class="manage-header">
            <el-button type="primary" @click="addUser">+ 新增</el-button>
            <CommonFormVue :formLabel="formLabel" :form="searchForm" :inline="true" ref="form">
                <el-button @click="getList(searchForm.keyword)" type="primary">搜索</el-button>
            </CommonFormVue>
        </div>
        <CommonTableVue :tableData="tableData" :config="config" @changePage="getList()"
            @edit="editUser" @del="delUser">
        </CommonTableVue>
    </div>
</template>

<script>
import CommonFormVue from "../../components/CommonForm.vue";
import CommonTableVue from "../../components/CommonTable.vue";
import { getUser } from "../../api/data"
export default {
    name: "user",
    components: { CommonFormVue, CommonTableVue },
    data() {
        return {
            operateType: "add",
            isShow: false,
            opertateFormLabel: [
                {
                    model: "name",
                    label: "姓名",
                    type: "input",
                },
                {
                    model: "age",
                    label: "年龄",
                    type: "input",
                },
                {
                    model: "sex",
                    label: "性别",
                    type: "select",
                    opts: [
                        {
                            label: "男",
                            value: "1",
                        },
                        {
                            label: "女",
                            value: "0",
                        },
                    ],
                },
                {
                    model: "birth",
                    label: "出生日期",
                    type: "date",
                },
                {
                    model: "addr",
                    label: "地址",
                    type: "input",
                },
            ],
            operateForm: {
                name: "",
                addr: "",
                age: "",
                sex: "",
                birth: "",
            },
            formLabel: [
                {
                    model: "keyword",
                    label: "",
                    type: "input",
                },
            ],
            searchForm: {
                keyword: "",
            },
            tableData:[],
            config: {
                page: 1,
                total: 30
            }
        }
    },
    methods: {
        cancel(){
            this.isShow = false
        },
        confirm() {
            if (this.operateType === "edit") {
                this.$http.post("/user/edit", this.operateForm).then((res) => {
                    console.log(res);
                    this.isShow = false;
                    this.getList()
                });
            } else {
                this.$http.post("/user/add", this.operateForm).then((res) => {
                    console.log(res);
                    this.isShow = false;
                    this.getList()
                });
            }
        },
        addUser() {
            (this.isShow = true),
                (this.operateType = "add"),
                (this.operateForm = {
                    name: "",
                    addr: "",
                    age: "",
                    sex: "",
                    birth: "",
                });
        },
        getList(name = '') {
            this.config.loading = true
            name ? (this.config.page = 1) : ''
            getUser({
                page: this.config.page,
                name
            }).then(({ data: res }) => {
                console.log(res, 'res');
                this.tableData = res.list.map(item => {
                    item.sexLabel = item.sex === 0 ? "女" : "男"
                    return item
                })
                this.config.total = res.count
                this.config.loading = false
            })
        },
        editUser(row) {
            this.operateType = 'edit'
            this.isShow = true,
            this.operateForm = row
        },
        delUser(row) {
            this.$confirm("此操作将永久删除该文件,是否继续?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const id = row.id
                this.$http.post("/user/del",id).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getList()
                })
            })
        }
    },
    created() {
        this.getList()
    }
};
</script>

<style lang="scss" scoped>
.manage-header {
    display: flex;
    justify-content: space-between;
    align-self: center;

    .el-button {
        width: 70px;
        height: 40px;
        padding: 0px;
    }
}
</style>
